<template>
  <div class="app-wrapper " :class="{hideSidebar: isCollapse, 'theme-dark': night }">
    <navbar> </navbar>
    <div class="main-container">
      <side-menu > </side-menu>
      <div>
        <tags-view > </tags-view>
        <section class="hs-content" v-loading="loading">
          <transition name="fade" mode="out-in">
            <router-view :key="key"> </router-view>
          </transition>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from './componnets/Navbar'
import TagsView from './componnets/TagsView'
import SideMenu from './componnets/SideMenu'
import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  data () {
    return {
      key: ''
    }
  },
  components: {
    Navbar,
    SideMenu,
    TagsView
  },
  computed: {
    ...mapGetters({
      loading: 'getLoading',
      routes: 'permissionMenus',
      isCollapse: 'menuCollapse',
      night: 'isDarkTheme'
    })
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
  @import "assets/styles/jupiter.scss";
</style>
